<!DOCTYPE html><html><head> 
  <link href="../css/main.css" rel="stylesheet" type="text/css" /> 
  <script type="text/javascript" src="../MarkdownWebapp/MarkdownWebapp.nocache.js"></script> 
  <script type="text/javascript" src="../ace/ace.js"></script> 
  <link rel="icon" type="image/x-icon" href="../favicon.ico" /> 
  <script type="text/javascript">window["_GOOG_TRANS_EXT_VER"] = "1";</script> 
  <title>Cmd 向导 | Sencha Cmd 6 - 升级向导</title> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <script async="" type="text/javascript" src="../../../https@use.typekit.com/bqo8qzg.js"></script> 
  <script type="text/javascript">

    function showMenu(link_obj){
      var menu = document.getElementById("tpl-toc");

      link_obj.innerHTML = (link_obj.innerHTML == 'CLOSE MENU') ? 'MENU' : 'CLOSE MENU';

      if(menu.style.display == 'block'){
        menu.style.display = 'none';
      }else{
        menu.style.display = 'block';
      }
    }

  </script> 
 </head> 
 <body> 
  <div id="header"> 
   <a href="../../../www.sencha.com/default.htm"><img class="sencha-logo" src="../images/logo.png" /></a> 
   <h1 id="current-product"><a href="#">Cmd 向导 ▼</a></h1> 
   <div id="mobile_menu"> 
    <a id="mobile_menu_link" onclick="showMenu(this);" href="#">MENU</a> 
   </div> 
    
  </div> 
  <div id="content" itemscope="" itemtype="http://schema.org/Article"> 
   <div id="tpl-toc"> 
    <div id="tpl-toc-content"> 
     <a class="toggle-button" href="#">expand</a> 
     <ul> 
      <li class="file"><a href="../../default.htm" data-full-load="true" title="Home">Sencha 向导</a></li> 
      <li class="file"><a href="index.html" data-full-load="true" title="Cmd Home">Sencha Cmd 向导</a></li> 
      <li class="file"><a href="whats_new_cmd.html" title="">Cmd 6 新特性</a></li> 
      <li class="file"><a href="fashion.html" title="">欢迎使用 Fashion</a></li> 
      <li class="file"><a href="cmd_upgrade_guide.html" title="Sencha Cmd 6 - 升级向导">Sencha Cmd 6 - 升级向导</a></li> 
      <li class="file"><a href="intro_to_cmd.html" title="Sencha Cmd 介绍">Sencha Cmd 介绍</a></li> 
      <li class="file"><a href="cmd_upgrade.html" title="理解 App 升级">理解 App 升级</a></li> 
      <li class="file"><a href="cmd_compiler.html" title="对编译器友好的代码原则">对编译器友好的代码原则</a></li> 
      <li class="file"><a href="cordova_phonegap.html" title="Cordova 和 Phonegap 应用">Cordova 和 Phonegap 应用</a></li> 
      <li class="file"><a href="workspaces.html" title="Sencha Cmd 的 Workspace">Sencha Cmd 的 Workspace</a></li> 
      <li class="file"><a href="microloader.html" title="加载器 Microloader">加载器 Microloader</a></li> 
      <li class="file"><a href="resource_management.html" title="资源管理">资源管理</a><span class="tpl-toc-img-new">★</span></li> 
      <li class="file"><a href="compatibility_matrix.html" title="Sencha Cmd 兼容性列表">Sencha Cmd 兼容性列表</a><span class="tpl-toc-img-new">★</span></li> 
      <li class="folder"><a href="#">Sencha Cmd 包(Packages)</a> 
       <ul expand="false"> 
        <li class="file"><a href="cmd_packages/cmd_packages.html" title="Sencha Cmd 包(Packages)">Sencha Cmd 包(Packages)</a></li> 
        <li class="file"><a href="cmd_packages/cmd_creating_packages.html" title="创建包(Packages)">创建包(Packages)</a></li> 
       </ul></li> 
      <li class="folder"><a href="#">Sencha Cmd 进阶</a> 
       <ul expand="false"> 
        <li class="file"><a href="advanced_cmd/cmd_advanced.html" title="Sencha Cmd 进阶">Sencha Cmd 进阶</a></li> 
        <li class="file"><a href="advanced_cmd/cmd_build.html" title="App Build 过程内部机制">App Build 过程内部机制</a></li> 
        <li class="file"><a href="advanced_cmd/cmd_compiler_reference.html" title="Sencha 编译器 参考">Sencha 编译器 参考</a></li> 
        <li class="file"><a href="advanced_cmd/cmd_ant.html" title="Ant 集成">Ant 集成</a></li> 
        <li class="file"><a href="advanced_cmd/cmd_metadata.html" title="Sencha Cmd Metadata">Sencha Cmd Metadata</a></li> 
        <li class="file"><a href="advanced_cmd/cmd_reference.html" title="Sencha Cmd 参考">Sencha Cmd 参考</a></li> 
       </ul></li> 
      <li class="folder"><a href="#">Ext JS</a> 
       <ul expand="false"> 
        <li class="file"><a href="extjs/cmd_app.html" title="">Sencha Cmd 结合 Ext JS</a></li> 
       </ul></li> 
      <li class="folder"><a href="#">Sencha Touch</a> 
       <ul expand="false"> 
        <li class="file"><a href="touch/cmd_app.html" title="">Sencha Cmd 结合 Sencha Touch</a></li> 
       </ul></li> 
      <li class="file"><a href="sencha_blog.html" title="Sencha 博客">Sencha 博客</a></li> 
     </ul> 
    </div> 
   </div> 
   <div id="middle"> 
    <div id="tpl-content"> 
     <div> 
      <div class="toc-page" style="display:block;">
        Contents 
       <a class="toc-page-h2" href="#Installer_Changes" title="Installer Changes">Installer Changes</a> 
       <a class="toc-page-h3" href="#Windows_PATH" title="Windows PATH">Windows PATH</a> 
       <a class="toc-page-h3" href="#Mac_OS_X___Linux" title="Mac OS X / Linux">Mac OS X / Linux</a> 
       <a class="toc-page-h2" href="#Migration_Process" title="Migration Process">Migration Process</a> 
       <a class="toc-page-h3" href="#Before_You_Start" title="Before You Start">Before You Start</a> 
       <a class="toc-page-h4" href="#Clean_Slate" title="Clean Slate">Clean Slate</a> 
       <a class="toc-page-h4" href="#Install_Merge_Tool__Recommended_" title="Install Merge Tool (Recommended)">Install Merge Tool (Recommended)</a> 
       <a class="toc-page-h3" href="#Upgrade_Sencha_Cmd" title="Upgrade Sencha Cmd">Upgrade Sencha Cmd</a> 
       <a class="toc-page-h4" href="#Configure_Merge_Tool" title="Configure Merge Tool">Configure Merge Tool</a> 
       <a class="toc-page-h3" href="#App_Upgrade" title="App Upgrade">App Upgrade</a> 
       <a class="toc-page-h3" href="#Check_Point" title="Check Point">Check Point</a> 
       <a class="toc-page-h3" href="#Clean_and_Build" title="Clean and Build">Clean and Build</a> 
       <a class="toc-page-h3" href="#Check_Point" title="Check Point">Check Point</a> 
       <a class="toc-page-h2" href="#Watch" title="Watch">Watch</a> 
       <a class="toc-page-h2" href="#Application_Updates" title="Application Updates">Application Updates</a> 
       <a class="toc-page-h3" href="#app_json" title="app.json">app.json</a> 
       <a class="toc-page-h4" href="#The__sass__object" title="The “sass” object">The “sass” object</a> 
       <a class="toc-page-h4" href="#The__css__array" title="The “css” array">The “css” array</a> 
       <a class="toc-page-h2" href="#Workspace_Updates" title="Workspace Updates">Workspace Updates</a> 
       <a class="toc-page-h3" href="#workspace_json" title="workspace.json">workspace.json</a> 
       <a class="toc-page-h2" href="#Sencha_Space_Updates" title="Sencha Space Updates">Sencha Space Updates</a> 
      </div> 
      <div id="tpl-content-name" itemprop="name"> 
       <h1>Sencha Cmd 6 升级向导</h1> 
      </div> 
      <div id="tpl-content-articleBody" itemprop="articleBody"> 
       <p>This guide is meant to assist developers using Sencha Cmd in migrating from Ext JS 5.x or Sencha Touch 2.4.x to Ext JS 6.0.x. Even though there are some important changes in this release, we have tried to make the upgrade process as painless as possible. Before diving in, it is worth mentioning that this guide makes a few assumptions.</p> 
       <ul> 
        <li>Your application was built using Ext JS 5.x or Sencha Touch 2.4.x</li> 
        <li>Your application is laid out using our recommended MVC pattern</li> 
        <li>You application is currently building with Sencha Cmd</li> 
       </ul> 
       <p>We recognize that not all of our customers have the luxury of running the latest versions of framework and Sencha Cmd. Time restrictions, deadlines, and support licenses often dictate what versions are used in the enterprise. If your application is based on an older release of Sencha frameworks, you consult the 升级向导s specifically relating to these releases as a starting point for further information. For example, the <a href="../5.x/cmd_upgrade_guide.html">Sencha Cmd 5 升级向导</a>.</p> 
       <h2 id="Installer_Changes">Installer Changes</h2> 
       <p>With Sencha Cmd 6, we have introduced new installers that allow non-admin/root users to install the application. We have also included the Java Runtime Environment (JRE) required by Sencha Cmd so you won’t have to download and install this separately. If you have a previous release of Sencha Cmd there are some issues you might encounter in your upgrade.</p> 
       <h3 id="Windows_PATH">Windows PATH</h3> 
       <p>A side-effect of the PATH change for Windows users with older versions of Sencha Cmd is that you will not see the new version of “sencha” at the front of your PATH. This is expected behavior. To manage your PATH, use the Control Panel:</p> 
       <p><img src="images/upgrade_guide_env_vars.png" alt="image alt text" /></p> 
       <p>To change the PATH for the User or System, find the entry in this dialog:</p> 
       <p><img src="images/upgrade_guide_path.png" alt="image alt text" /></p> 
       <p>The System PATH string will appear before the User PATH string in the final value of the PATH environment variable. Previous versions of Sencha Cmd installed in the System PATH and so these will “hide” the new version.</p> 
       <h3 id="Mac_OS_X___Linux">Mac OS X / Linux</h3> 
       <p>On non-Windows platforms, the installer now adds only one location to the PATH by modifying <code>~/.bash_profile</code>:</p> 
       <pre mode="javascript" theme="chrome"><code>export PATH=~/bin/Sencha/Cmd:$PATH</code></pre> 
       <p>In previous installers, you might find multiple entries such as these:</p> 
       <pre mode="javascript" theme="chrome"><code>export PATH=~/bin/Sencha/Cmd/5.1.1.39:$PATH

export PATH=~/bin/Sencha/Cmd/5.1.2.52:$PATH

export PATH=~/bin/Sencha/Cmd/5.1.3.61:$PATH</code></pre> 
       <p>The new installer now maintains the symbolic link “~/bin/Sencha/Cmd/sencha” that points to the most recently installed version.</p> 
       <h2 id="Migration_Process">Migration Process</h2> 
       <h3 id="Before_You_Start">Before You Start</h3> 
       <h4 id="Clean_Slate">Clean Slate</h4> 
       <p>The first step in the migration process is to make sure you have no changes pending in your source control system. Starting the upgrade while you have other changes in progress is not recommended. This will allow you to much more easily review the changes made by Sencha Cmd so that you are sure any customizations you have made are still in place.</p> 
       <h4 id="Install_Merge_Tool__Recommended_">Install Merge Tool (Recommended)</h4> 
       <p>During an upgrade, Sencha Cmd may need to apply changes to some files that you may also have edited. As with any such scenario there is the possibility that you have edited the same lines that Sencha Cmd needs to update creating a merge conflict.</p> 
       <p>The good news is that, like version control, there are tools that can help resolve these merge conflicts. Sencha Cmd can utilize any visual merge tool that you can run from a command line (which is pretty much all of them). This step is optional, but highly recommended as it will make dealing with upgrade much simpler.</p> 
       <p>Here is a list of some popular choices (some free, some commercial):</p> 
       <ul> 
        <li><a href="../../../www.perforce.com/product/components/perforce-visual-merge-and-diff-tools">p4merge</a></li> 
        <li><a href="../../../www.sourcegear.com/diffmerge/index.html">SourceGear</a></li> 
        <li><a href="../../../sourceforge.net/projects/kdiff3/files/kdiff3/default.htm">kdiff3</a></li> 
        <li><a href="../../../www.syntevo.com/smartsynchronize/default.htm">Syntevo SmartSynchronize 3</a></li> 
        <li><a href="../../../tortoisesvn.net/default.htm">TortoiseMerge</a> - (part of TortoiseSVN)</li> 
        <li><a href="../../../www.araxis.com/merge/default.htm">AraxisMerge</a></li> 
       </ul> 
       <p>We will configure Sencha Cmd to use your preferred merge tool in the next step.</p> 
       <h3 id="Upgrade_Sencha_Cmd">Upgrade Sencha Cmd</h3> 
       <p>Next, you’ll need to grab the latest version of Sencha Cmd 6. You can download Sencha Cmd 6 from the <a href="../../../www.sencha.com/products/sencha-cmd/default.htm">Sencha web site</a>.</p> 
       <p>Install Sencha Cmd and restart your terminal. If you have an older version of Sencha Cmd you will probably need to correct your PATH (see above).</p> 
       <p><strong>Note:</strong> <em>If you have a previous version of Cmd installed, this will not replace it, but it will take precedence when running the Cmd software. See above for details.</em></p> 
       <h4 id="Configure_Merge_Tool">Configure Merge Tool</h4> 
       <p>If you have chosen to get a merge tool, we need to configure Sencha Cmd to use that merge tool. To do so you need to add two properties to the config file:</p> 
       <pre mode="javascript" theme="chrome"><code>cmd.merge.tool
cmd.merge.tool.args</code></pre> 
       <p>We can set these in the <code>&quot;sencha.cfg&quot;</code> file located in the Sencha Cmd installation folder. Alternatively, these two properties can be set in a version-independent way so your preferences apply to all versions of Sencha Cmd. For details see the end of the <code>&quot;sencha.cfg&quot;</code> file.</p> 
       <h3 id="App_Upgrade">App Upgrade</h3> 
       <p>We are ready to start the upgrade. Just run this command from your application’s root folder to get things going:</p> 
       <pre mode="javascript" theme="chrome"><code>sencha app upgrade path/to/ext6</code></pre> 
       <p>You should see a very minimal amount of green text letting you know that your application has been successfully upgraded. </p> 
       <p>If you are upgrading from Ext JS 4.x, you should consult the <strong>Microloader</strong> and <strong>Build Properties</strong> sections of <a href="../5.x/cmd_upgrade_guide.html">Sencha Cmd 5 升级向导</a>. Likewise, if you are using Cordova or PhoneGap, you should check those sections as well.</p> 
       <h3 id="Check_Point">Check Point</h3> 
       <p>Once the application is upgraded, and you’ve resolved any merge conflicts that might have been reported, now might be a good time to look at the differences in source control. If all looks good, it would be good to commit changes and get back to a clean slate.</p> 
       <h3 id="Clean_and_Build">Clean and Build</h3> 
       <p>The next step is to run a quick build from the app root folder:</p> 
       <pre mode="javascript" theme="chrome"><code>sencha app build --clean development</code></pre> 
       <p>Be aware that the <code>--clean</code> switch will delete all files from the build output folder. This will ensure there are no left-overs from previous builds but to be safe, we wanted to make sure all changes are committed before we proceed.</p> 
       <p>You might have further work to do to make the application buildable, especially if you are coming from Sencha Touch. If so, the above will display build errors. Once all build errors are corrected, the build command will succeed.</p> 
       <h3 id="Check_Point">Check Point</h3> 
       <p>Once all build errors are resolved, it is time to commit changes. The Cmd phase of the upgrade is complete. There may be more changes required due to a framework upgrade, but it is best to start those with a buildable application.</p> 
       <h2 id="Watch">Watch</h2> 
       <p>To use the new Live Update features made possible by Sencha Fashion (our new theme compiler), the application must be hosted by <code>app watch</code>.</p> 
       <p>Using watch, you can now view the application on your own web server’s localhost or at <a href="../../../localhost_3A1841/default.htm">http://localhost:1841</a>, which is the server we spin up for you automatically. The web server is now a default piece of <code>app watch</code>. Prior to Sencha Cmd 5 you had to separately run <code>sencha web start</code> to use the Sencha Cmd web server. You can adjust the web server configuration using these properties (their default values are shown):</p> 
       <pre mode="javascript" theme="chrome"><code>build.web.port=1841
build.web.root=${workspace.dir}</code></pre> 
       <h2 id="Application_Updates">Application Updates</h2> 
       <p>When generating an Ext JS 6 application with Sencha Cmd the following command will generate a universal application (one using both the classic and modern toolkits):</p> 
       <pre mode="javascript" theme="chrome"><code>sencha -sdk path/to/ext6 generate app YourAppName ./AppFolder</code></pre> 
       <p>To generate classic toolkit-only application for Ext JS 6, add <code>--classic</code>:</p> 
       <pre mode="javascript" theme="chrome"><code>sencha -sdk path/to/ext6 generate app --classic YourAppName ./AppFolder</code></pre> 
       <p>Similarly for a modern toolkit-only application:</p> 
       <pre mode="javascript" theme="chrome"><code>sencha -sdk path/to/ext6 generate app --modern YourAppName ./AppFolder</code></pre> 
       <h3 id="app_json">app.json</h3> 
       <p>Generated applications for Ext JS 6 have a more complete <code>app.json</code> file. Certain pieces of the standard <code>app.json</code> file may need to be incorporated into existing applications’ <code>app.json</code> files.</p> 
       <h4 id="The__sass__object">The “sass” object</h4> 
       <p>This object contains properties to control style compilation. The following fragment is what will be provided in a newly generated application. If your <code>app.json</code> does not have a “sass” object you can probably just paste the following in directly.</p> 
       <pre mode="javascript" theme="chrome"><code>/**
 * Sass configuration properties.
 */
&quot;sass&quot;: {
    /**
     * The root namespace to use when mapping *.scss files to classes in the
     * sass/src and sass/var directories. For example, &quot;App.view.Foo&quot; would
     * map to &quot;sass/src/view/Foo.scss&quot;. If we changed this to &quot;App.view&quot; then
     * it would map to &quot;sass/src/Foo.scss&quot;. To style classes outside the app's
     * root namespace, change this to &quot;&quot;. Doing so would change the mapping of
     * &quot;App.view.Foo&quot; to &quot;sass/src/App/view/Foo.scss&quot;.
     */
    &quot;namespace&quot;: &quot;App&quot;,

    /**
     * Comma-separated list of files or folders containing extra Sass. These
     * files are automatically included in the Sass compilation. By default this
     * is just &quot;etc/all.scss&quot; to allow import directives to control the order
     * other files are included.
     *
     * All &quot;etc&quot; files are included at the top of the Sass compilation in their
     * dependency order:
     *
     *      +-------+---------+
     *      |       | base    |
     *      | theme +---------+
     *      |       | derived |
     *      +-------+---------+
     *      | packages        |  (in package dependency order)
     *      +-----------------+
     *      | application     |
     *      +-----------------+
     */
    &quot;etc&quot;: [
        &quot;sass/etc/all.scss&quot;,
        &quot;${toolkit.name}/sass/etc/all.scss&quot;
    ],

    /**
     * Comma-separated list of folders containing Sass variable definitions
     * files. These file can also define Sass mixins for use by components.
     *
     * All &quot;var&quot; files are included after &quot;etc&quot; files in the Sass compilation in
     * dependency order:
     *
     *      +-------+---------+
     *      |       | base    |
     *      | theme +---------+
     *      |       | derived |
     *      +-------+---------+
     *      | packages        |  (in package dependency order)
     *      +-----------------+
     *      | application     |
     *      +-----------------+
     *
     * The &quot;sass/var/all.scss&quot; file is always included at the start of the var
     * block before any files associated with JavaScript classes.
     */
    &quot;var&quot;: [
        &quot;sass/var/all.scss&quot;,
        &quot;sass/var&quot;,
        &quot;${toolkit.name}/sass/var&quot;
    ],

    /**
     * Comma-separated list of folders containing Sass rule files.
     *
     * All &quot;src&quot; files are included after &quot;var&quot; files in the Sass compilation in
     * dependency order (the same order as &quot;etc&quot;):
     *
     *      +-------+---------+
     *      |       | base    |
     *      | theme +---------+
     *      |       | derived |
     *      +-------+---------+
     *      | packages        |  (in package dependency order)
     *      +-----------------+
     *      | application     |
     *      +-----------------+
     */
    &quot;src&quot;: [
        &quot;sass/src&quot;,
        &quot;${toolkit.name}/sass/src&quot;
    ],

    /**
     * File used to save sass variables edited via Sencha Inspector. This file
     * content will override all other variables.
     */
    // &quot;save&quot;: &quot;sass/save.scss&quot;
},</code></pre> 
       <p>The above properties will replace “app.sass.*” properties that may have been added to the <code>&quot;.sencha/app/sencha.cfg&quot;</code> file.</p> 
       <p>Even though Fashion is not in fact an implementation of Sass, we have retained the term “sass” in this context because it has historically been the name for these path settings.</p> 
       <h4 id="The__css__array">The “css” array</h4> 
       <p>Previously, applications had either of these (from Ext JS 5 or the Sencha Con EA release):</p> 
       <pre mode="javascript" theme="chrome"><code>{
    &quot;path&quot;: &quot;bootstrap.css&quot;,
    &quot;bootstrap&quot;: true
},

{
    &quot;path&quot;: &quot;${build.out.css.path}&quot;
    &quot;bundle&quot;: true
}</code></pre> 
       <p>The value should instead be:</p> 
       <pre mode="javascript" theme="chrome"><code>{
    &quot;path&quot;: &quot;${build.out.css.path}&quot;
    &quot;bundle&quot;: true,
    &quot;exclude&quot;: [&quot;fashion&quot;]
}</code></pre> 
       <p>The <code>exclude</code> property we’ve added ensures that the CSS file is skipped if we enable Fashion since it will build the CSS from the <code>.scss</code> sources.</p> 
       <h2 id="Workspace_Updates">Workspace Updates</h2> 
       <p>With Sencha Cmd 6, there is now a <code>workspace.json</code> file added to the workspace root folder. While this file will be generated when needed, it would benefit from some attention during an upgrade.</p> 
       <h3 id="workspace_json">workspace.json</h3> 
       <p>The file looks something like this by default:</p> 
       <pre mode="javascript" theme="chrome"><code>{
    /**
     * An array of the paths to all the applications present in
     * this workspace
     */
    &quot;apps&quot;: [
        &quot;app1&quot;
    ],

    /**
     * This is the folder for build outputs in the workspace.
     */
    &quot;build&quot;: {
        &quot;dir&quot;: &quot;${workspace.dir}/build&quot;
    },

    /**
     * These configs determine where packages are generated and
     * extracted to (when downloaded).
     */
    &quot;packages&quot;: {
        /**
         * This folder contains all local packages.
         * If a comma-separated string is used as value the first
         * path will be used as the path to generate new packages.
         */
        &quot;dir&quot;: &quot;${workspace.dir}/packages/local,${workspace.dir}/packages&quot;,

        /**
         * This folder contains all extracted (remote) packages.
         */
        &quot;extract&quot;: &quot;${workspace.dir}/packages/remote&quot;
    }
}</code></pre> 
       <p>The “apps” array contains the relative path to Sencha Cmd applications in the workspace. This list is maintained by <strong>sencha generate app</strong> but removing or relocating apps will require manual maintenance of this array. Previously generated apps would also need to be added manually. This array is not currently required by Sencha Cmd but will be important for future tooling to effectively see the list of applications in the workspace.</p> 
       <h2 id="Sencha_Space_Updates">Sencha Space Updates</h2> 
       <p>“Sencha Space” has been renamed to “Sencha Web Application Manager”. If you were integrating Sencha Space with Sencha Cmd, you’ll need to change the “space” object <code>app.json</code> to be “manager”.</p> 
      </div> 
      <div class="tpl-content-lastUpdated">
        Last updated 
       <div id="tpl-content-lastUpdated-date" itemprop="datePublished" datetime="2016-04-01T13:04Z">
         April 1, 2016 
       </div> 
      </div> 
     </div> 
    </div> 
   </div> 
  </div> 
  <div id="footer"> 
   <div id="footer-social"> 
    <div class="g-plusone" data-size="medium" data-annotation="none"></div> 
   </div> 
   <div id="footer-content"> 
    <a href="../../../www.sencha.com/products">Products</a> | 
    <a href="../../../www.sencha.com/services">Services</a> | 
    <a href="../../../www.sencha.com/support">Support</a> | 
    <a href="../../../www.sencha.com/training">Training</a> | 
    <a href="../../../www.sencha.com/partners">Partners</a> | 
    <a href="../../../www.sencha.com/blog">Community</a> | 
    <a href="../../../www.sencha.com/company">Company</a> 
   </div> 
  </div> 
  <div id="menu-product-container" style="display:none;"> 
   <div id="menu-dropdown"> 
    <div class="menu-landing-products"> 
     <div id="menu-vertical"> 
      <p class="menu-landing-product" rel="cmd"> <a> Sencha Cmd </a> </p> 
      <p class="menu-landing-product" rel="extjs"> <a> Sencha Ext JS </a> </p> 
      <p class="menu-landing-product" rel="sencha_test"> <a> Sencha Test </a> </p> 
      <p class="menu-landing-product" rel="ide_plugins"> <a> Sencha IDE Plugins </a> </p> 
      <p class="menu-landing-product" rel="sencha_inspector"> <a> Sencha Inspector </a> </p> 
      <p class="menu-landing-product" rel="gxt"> <a> Sencha GXT </a> </p> 
      <p class="menu-landing-product" rel="webappmgr"> <a> Sencha Web Application Manager </a> </p> 
      <p class="menu-landing-product" rel="architect"> <a> Sencha Architect </a> </p> 
      <p class="menu-landing-product" rel="touch"> <a> Sencha Touch </a> </p> 
     </div> 
    </div> 
    <div id="menu-product-details"> 
     <div id="cmd-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Cmd 
      </div> 
      <div class="menu-landing-doc-heading">
        6.x 
      </div> 
      <a href="../6.x"> 6.x </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <div class="menu-landing-doc-heading">
        5.x 
      </div> 
      <a href="../5.x"> 5.x </a> 
     </div> 
     <div id="extjs-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Ext JS 
      </div> 
      <div class="menu-landing-doc-heading">
        6.x 
      </div> 
      <a href="../../extjs/6.0/default.htm"> 6.0.2 </a> 
      <a class="menu-landing-zip" style="padding-right:0;" href="../../downloads/extjs-docs-6.0.2-classic.zip"> (classic) </a> 
      <a class="menu-landing-zip menu-landing-lesspad" href="../../downloads/extjs-docs-6.0.2-modern.zip"> (modern) </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <a href="../../extjs/6.0/default.htm"> 6.0.1 </a> 
      <a class="menu-landing-zip" style="padding-right:0;" href="../../downloads/extjs-docs-6.0.1-classic.zip"> (classic) </a> 
      <a class="menu-landing-zip menu-landing-lesspad" href="../../downloads/extjs-docs-6.0.1-modern.zip"> (modern) </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <a href="../../extjs/6.0/default.htm"> 6.0.0 </a> 
      <a class="menu-landing-zip" style="padding-right:0;" href="../../downloads/extjs-docs-6.0.0-classic.zip"> (classic) </a> 
      <a class="menu-landing-zip" style="padding-left:0;" href="../../downloads/extjs-docs-6.0.0-modern.zip"> (modern) </a> 
      <div class="menu-landing-doc-heading">
        5.1.x 
      </div> 
      <a href="../../extjs/5.1/default.htm"> 5.1.2 </a> 
      <a class="menu-landing-zip" href="../../downloads/extjs-docs-5.1.2.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/5.1/default.htm"> 5.1.1 </a> 
      <a class="menu-landing-zip" href="../../downloads/extjs-docs-5.1.1.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/5.1/default.htm"> 5.1.0 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/ext-docs-5.1.0.zip"> (offline docs) </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        5.0.x 
      </div> 
      <a href="../../extjs/5.0/default.htm"> 5.0.1 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/ext-docs-5.0.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/5.0/default.htm"> 5.0.0 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/ext-docs-5.0.0.zip"> (offline docs) </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        4.2.x 
      </div> 
      <a href="../../extjs/4.2.5/default.htm"> 4.2.5 </a> 
      <a class="menu-landing-zip" href="../../downloads/extjs-docs-4.2.5.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/4.2.4/default.htm"> 4.2.4 </a> 
      <a class="menu-landing-zip" href="../../downloads/extjs-docs-4.2.4.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/4.2.3/default.htm"> 4.2.3 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/extjs-docs-4.2.3.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/4.2.2/default.htm"> 4.2.2 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/extjs-docs-4.2.2.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/4.2.1/default.htm"> 4.2.1 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/extjs-docs-4.2.1.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../extjs/4.2.0/default.htm"> 4.2.0 </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        4.1.x 
      </div> 
      <a href="../../extjs/4.1.3/default.htm"> 4.1.3 </a> 
      <br /> 
      <a href="../../extjs/4.1.2/default.htm"> 4.1.2 </a> 
      <br /> 
      <a href="../../extjs/4.1.1/default.htm"> 4.1.1 </a> 
      <br /> 
      <a href="../../extjs/4.1.0/default.htm"> 4.1.0 </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        4.0.x 
      </div> 
      <a href="../../extjs/4.0.7/default.htm"> 4.0.7 </a> 
      <br /> 
      <a href="../../extjs/4.0.0/default.htm"> 4.0.0 </a> 
     </div> 
     <div id="sencha_test-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Test 
      </div> 
      <a href="../../sencha_test/index.html"> Sencha Test </a> 
      <span class="tpl-toc-img-new">★</span> 
     </div> 
     <div id="ide_plugins-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha IDE Plugins 
      </div> 
      <a href="../../ide_plugins/jetbrains_ide_plugin.html"> JetBrains Plugin 6.x </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <a href="../../ide_plugins/eclipse_ide_plugin.html"> Eclipse Plugin </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <a href="../../ide_plugins/visual_studio_ide_plugin.html"> Visual Studio Plugin </a> 
      <span class="tpl-toc-img-new">★</span> 
     </div> 
     <div id="sencha_inspector-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Inspector 
      </div> 
      <a href="../../sencha_inspector/index.html"> Sencha Inspector 6.x </a> 
      <span class="tpl-toc-img-new">★</span> 
     </div> 
     <div id="gxt-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha GXT 
      </div> 
      <!-- GXT 4.0 --> 
      <div class="menu-landing-doc-heading">
        4.0 
       <span class="tpl-toc-img-new">★</span> 
      </div> 
      <a href="../../../examples.sencha.com/gxt/4.0.1"> 4.0 Explorer Examples </a> 
      <br /> 
      <a href="../../../examples.sencha.com/gxt-edash/4.0.1"> 4.0 Dashboard Example </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/gxt/examples-src/gxt-edash-4.0.1.zip"> (War) </a> 
      <br /> 
      <a href="../../gxt/4.x/default.htm"> 4.0 Guides </a> 
      <br /> 
      <a href="../../gxt/4.x/javadoc/gxt-4.0.0"> 4.0 Javadoc </a> 
      <br /> 
      <!-- GXT 3.1.x --> 
      <div class="menu-landing-doc-heading">
        3.1 
      </div> 
      <a href="../../../www.sencha.com/examples/default.htm"> 3.1.4 Examples </a> 
      <br /> 
      <a href="../../gxt/3.x/default.htm"> 3.1.4 Guides </a> 
      <br /> 
      <a href="../../gxt/3.x/javadoc"> 3.1.4 Javadoc </a> 
      <br /> 
      <!-- GXT 3.0.x --> 
      <!-- GXT 2.x --> 
      <div class="menu-landing-doc-heading">
        2.0 
      </div> 
      <a href="../../../https@www.sencha.com/examples-2/default.htm"> 2.3.1 Examples </a> 
     </div> 
     <div id="webappmgr-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Web Application Manager 
      </div> 
      <div class="menu-landing-doc-heading">
        6.0.x 
      </div> 
      <a href="../../webappmgr"> 6.0.0 </a> 
      <span class="tpl-toc-img-new">★</span> 
     </div> 
     <div id="architect-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Architect 
      </div> 
      <div class="menu-landing-doc-heading">
        3.x 
      </div> 
      <a href="../../architect/3.5/default.htm"> 3.5 </a> 
      <span class="tpl-toc-img-new">★</span> 
      <br /> 
      <a href="../../architect/3/default.htm"> 3.2 </a> 
      <a class="menu-landing-zip menu-landing-lesspad" href="../../../cdn.sencha.com/downloads/docs/architect-docs-3.zip"> (offline docs) </a> 
     </div> 
     <div id="touch-menu-product" class="menu-specific-product"> 
      <div class="menu-landing-doc-heading">
        Sencha Touch 
      </div> 
      <div class="menu-landing-doc-heading">
        2.4.x 
      </div> 
      <a href="../../touch/2.4/default.htm"> 2.4.2 </a> 
      <span class="tpl-toc-img-new">★</span> 
      <a class="menu-landing-zip menu-landing-lesspad" href="../../downloads/touch-docs-2.4.2.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../touch/2.4/default.htm"> 2.4.1 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/touch-docs-2.4.1.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../touch/2.4/2.4.0-apidocs"> 2.4.0 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/touch-docs-2.4.0.zip"> (offline docs) </a> 
      <div class="menu-landing-doc-heading">
        2.3.x 
      </div> 
      <a href="../../touch/2.3.1/default.htm"> 2.3.1 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/touch-docs-2.3.1.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../touch/2.3.0/default.htm"> 2.3.0 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/touch-docs-2.3.0.zip"> (offline docs) </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        2.2.x 
      </div> 
      <a href="../../touch/2.2.1/default.htm"> 2.2.1 </a> 
      <a class="menu-landing-zip" href="../../../cdn.sencha.com/downloads/docs/touch-docs-2.2.1.zip"> (offline docs) </a> 
      <br /> 
      <a href="../../touch/2.2.0/default.htm"> 2.2.0 </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        2.1.x 
      </div> 
      <a href="../../touch/2.1.1/default.htm"> 2.1.1 </a> 
      <br /> 
      <a href="../../touch/2.1.0/default.htm"> 2.1.0 </a> 
      <br /> 
      <div class="menu-landing-doc-heading">
        2.0.x 
      </div> 
      <a href="../../touch/2.0.2/default.htm"> 2.0.2 </a> 
      <br /> 
      <a href="../../touch/2.0.1/default.htm"> 2.0.1 </a> 
      <br /> 
      <a href="../../touch/2.0.0/default.htm"> 2.0.0 </a> 
     </div> 
    </div> 
   </div> 
  </div> 
   
  <script type="text/javascript">
    adroll_adv_id = "5RM2BL5IGRFLRG5VDQ7OIE";
    adroll_pix_id = "LWO7UZXBFVESTOMYFI2LYS";
    /* OPTIONAL: provide email to improve user identification */
    /* adroll_email = "username_40example.com"; */
    (function () {
      var _onload = function(){
        if (document.readyState && !/loaded|complete/.test(document.readyState)){setTimeout(_onload, 10);return}
        if (!window.__adroll_loaded){__adroll_loaded=true;setTimeout(_onload, 50);return}
        var scr = document.createElement("script");
        var host = (("https:" == document.location.protocol) ? "../../../https@s.adroll.com" : "../../../a.adroll.com");
        scr.setAttribute('async', 'true');
        scr.type = "text/javascript";
        scr.src = host + "/j/roundtrip.js";
        ((document.getElementsByTagName('head') || [null])[0] ||
        document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
      };
      if (window.addEventListener) {window.addEventListener('load', _onload, false);}
      else {window.attachEvent('onload', _onload)}
    }());
  </script> 
  <script>
    var menu = document.getElementById("tpl-toc"),
        link_obj = document.getElementById("mobile_menu_link"),
        links = menu.querySelectorAll('a');

    for(i=0; i < links.length; i++) {
      links[i].onclick = function() {
        var mq = window.matchMedia('only screen and (max-width: 768px)');

        if(mq.matches) {
          menu.style.display = 'none';
          link_obj.innerHTML = 'MENU';
        }
      }
    }
  </script> 
  <script type="text/javascript">
    </script>              <script src='../../../munchkin.marketo.net/munchkin-beta.js' type='text/javascript'></script><script>Munchkin.init('374-WES-121');</script>   
 
</body></html>